<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/Underline.css" />
		<style type="text/css">
			*{
				margin: 0px;padding: 0px;
			}
			.nav{
				width: 1848px;height: 120px;
				background: #faf4f6;
			}
			.nav img{
				position: absolute;
				width: 180px;height: 120px;				
				left: 170px;right: 0;
			}
			.font_left{
				position: absolute;
				cursor: default;
				font-family: "微软雅黑";
				font-size: 32px;
				font-weight: 800;
				color: #f13a3a;
				left: 290px;top: 35px;
			}
			.font_right{
				position: absolute;
				cursor: default;
				font-family: "微软雅黑";
				font-weight: 800;
				font-size: 32px;
				color: #cccccc;
				left: 360px;top: 35px;								
			}
			.nav_title{                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
				list-style: none;						
			}
			.nav_title li{				
				position: relative;display:inline-block;			/*运用了px这里有一个问题当页面缩放的时候字体也会跟着动.*/
				cursor: pointer;
				font-family: "HYLeMiaoTiJ";
				font-size: 20px;
				margin-top: 50px;
				margin-left: 60px;				
				left: 300px;									
			}
			.nav_title li a{
				text-decoration: none;
				color: #000000;
			}			
			.nav_title li a:hover{							
				color: red;
			}
			
			.dropbtn{
            	background-color: #faf4f6;
            	color: #000000;
      			border: none;
            	cursor: pointer;
        	}
        	.dropdown-content{
            	display: none; 	
            	position: absolute;
            	z-index: 997;
            	background-color: #f6f6f6;
            	border: 1px solid #CCCCCC;           	
            	left: -135px;
            	margin-right: 200px;
            	box-shadow:  0px 8px 16px 0px rgba(0,0,0,0.2);
            	
           		/*transform: scaleY(0);
            	transition:all 6s;*/			/*动画效果出不来*/
       		}
       		.dropdown-content a{
           		 color: #000000;
           		 width: 295px;height: 200px;
           		 text-decoration: none;
            	 display: block;
        	}
        	.nav_title li:hover .dropdown-content{
            		display: block; 	!important
            		/*transform: scaleY(2);*/
       		 }
       		
			#shoppingcar{		
				width: 160px;height: 50px;
				border: 1px solid #CCCCCC;
				opacity: 1;
				text-align: center;
				font-size: 13px;
				line-height: 50px;
			}
			#shoppingcar_left{
				position: absolute;
				width: 40px;height: 30px;
				left: 4px;top: -3px;
			}
			#shoppingcar_right{
				position: absolute;
				width: 25px;height: 20px;
				left: 126px;top: 4px;
			}
			
			.R_right{
				position: fixed;
				right: -10px;
				width: 70px;height: 100%;
				border: 0px solid #CCCCCC;
				background: #202020;
				opacity: 1;
				z-index: 999;
			}
			.R_right .border_1{
				margin-top: 150px;
				width: 58px;height: 50px;
				border: 0px solid pink;
				background: #202020;
			}
			.R_right .border_1 img{
				margin: 10px 0 0 17px;
			}
			.R_right .border_1:hover{
				width: 60px;height: 50px;
				border: 0px solid pink;
				background: red;
			}
			.up_border_1{
				background: #202020;
				width: 120px;height: 51px;
				position: absolute;
				left: -170px;
				top: 150px;
				opacity: 0;
				display: none;
			}
			.up_border_1:after{	
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #202020;

				position: absolute;

				bottom:10px;

				left:120px;

			
			}
			.border_1:hover .up_border_1{
				display:block;
			}
			.up_border_1 .p_right_1{
				text-align: center;
				line-height: 50px;
			
			}
			.up_border_1 .p_right_1 a{
				text-decoration: none;
				color: #FFFFFF;
			}
			
			.R_right .border_2{
				margin-top: 25px;
				width: 58px;height: 50px;
				border: 0px solid pink;
				background: #202020;
			}
			.R_right .border_2 img{
				margin: 12px 0 0 17px;
			}
			.R_right .border_2:hover{
				width: 60px;height: 50px;
				border: 0px solid pink;
				background: red;
			}
			.up_border_2{
				background: #202020;
				width: 120px;height: 51px;
				position: absolute;
				left: -170px;
				top: 225px;
				opacity: 0;
				display: none;
			}
			.up_border_2:after{	
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #202020;

				position: absolute;

				bottom:10px;

				left:120px;

			
			}
			.border_2:hover .up_border_2{
				display:block;
			}
			.up_border_2 .p_right_2{
				text-align: center;
				line-height: 50px;
			
			}
			.up_border_2 .p_right_2 a{
				text-decoration: none;
				color: #FFFFFF;
			}
			
			.R_right .border_3{
				width: 58px;height:180px;   /*字会动是因为width在变，字体设置的是text-align: center;*/
				border: 0px solid pink;
				background: #202020;
			}
			.R_right .border_3 img{
				margin: 12px 0 0 17px;
			}
			.R_right .border_3:hover{
				width: 60px;height: 180px;
				border: 0px solid pink;
				background: red;
			}
			.R_right .R_right_button{
				margin-top: 15px;
				margin-left: 19px;
				width: 20px;
				background: #c40000;
				text-align: center;
				color: #FFFFFF;
				border: 1px solid pink;
				border-radius: 50%;
			}
			
			.R_right .border_4{
				margin-top: 240px;
				width: 58px;height:50px;
				border: 0px solid pink;
				background: #202020;
			}
			.R_right .border_4 img{
				margin: 11px 0 0 14px;
			}
			.R_right .border_4:hover{
				width: 60px;height: 50px;
				border: 0px solid pink;
				background: red;
			}
			.up_border_4{
				background: #202020;
				width: 120px;height: 51px;
				position: absolute;
				left: -170px;
				top: 709px;
				opacity: 0;
				display: none;
			}
			.up_border_4:after{	
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #202020;

				position: absolute;

				bottom:10px;

				left:120px;

			
			}
			.border_4:hover .up_border_4{
				display:block;
			}
			.up_border_4 .p_right_4{
				text-align: center;
				line-height: 50px;
			
			}
			.up_border_4 .p_right_4 a{
				text-decoration: none;
				color: #FFFFFF;
			}
			
			.R_right .border_5{
				margin-top: 5px;
				width: 58px;height:50px;
				border: 0px solid pink;
				background: #202020;
			}
			.R_right .border_5 img{
				margin: 11px 0 0 14px;
			}
			.R_right .border_5:hover{
				width: 60px;height: 50px;
				border: 0px solid pink;
				background: red;
			}
			.up_border_5{
				background: #FFFFFF;
				width: 180px;height: 180px;
				position: absolute;
				left: -230px;
				top: 634px;
				opacity: 0;
				display: none;
				box-shadow:  0px 8px 16px 10px rgba(0,0,0,0.2);
			}
			.up_border_5:after{	
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #FFFFFF;

				position: absolute;

				bottom:10px;

				left:180px;

			
			}
			.border_5:hover .up_border_5{
				display:block;
			}
			.up_border_5 .p_right_5{
				text-align: center;
				line-height: 28px;
				font-family: "微软雅黑";
			
			}
			.up_border_5 .p_right_5 a{
				text-decoration: none;
				color: #FFFFFF;
			}
			
			.R_right .border_6{
				margin-top: 10px;
				width: 58px;height: 50px;
				border: 0px solid pink;
				background: #202020;
			}
			.R_right .border_6 img{
				margin: 10px 0 0 14px;
			}
			.R_right .border_6:hover{
				width: 60px;height: 50px;
				border: 0px solid pink;
				background: red;
			}
			.up_border_6{
				background: #202020;
				width: 120px;height: 51px;
				position: absolute;
				left: -170px;
				top: 824px;
				opacity: 0;
				display: none;
			}
			.up_border_6:after{	
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #202020;

				position: absolute;

				bottom:10px;

				left:120px;

			
			}
			.border_6:hover .up_border_6{
				display:block;
			}
			.up_border_6 .p_right_6{
				text-align: center;
				line-height: 50px;
			
			}
			.up_border_6 .p_right_6 a{
				text-decoration: none;
				color: #FFFFFF;
			}
			
			.denglu_1{
				width: 300px;height: 280px;
				background: #FFFFFF;
				position: absolute;
				left: -300px;top: 150px;
				box-shadow: 0px 8px 16px 10px rgba(0,0,0,0.2);
				display: none;
				opacity: 1;
				z-index: 998; 				
			}
			/*.border_1:hover .denglu{
				display: block;
			}*/
			.denglu_1:after{
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #FFFFFF;

				position: absolute;

				top: 10px;

				left:300px;
		
			}
			
			.denglu_2{
				width: 300px;height: 280px;
				background: #FFFFFF;
				position: absolute;
				left: -300px;top: 225px;
				box-shadow: 0px 8px 16px 10px rgba(0,0,0,0.2);
				display: none;
				opacity: 1;
				z-index: 998; 				
			}
			/*.border_2:hover .denglu{
				display: block;
			}*/
			.denglu_2:after{
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #FFFFFF;

				position: absolute;

				top: 10px;

				left:300px;
		
			}
			
			.denglu_3{
				width: 300px;height: 280px;
				background: #FFFFFF;
				position: absolute;
				left: -300px;top: 288px;
				box-shadow: 0px 8px 16px 10px rgba(0,0,0,0.2);
				display: none;
				opacity: 1;
				z-index: 998; 				
			}
			/*.border_3:hover .denglu{
				display: block;
			}*/
			.denglu_3:after{
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #FFFFFF;

				position: absolute;

				top: 10px;

				left:300px;
		
			}
			.denglu_font{
				font-family: "微软雅黑";
				margin: 20px 0 0 20px;
			}
			#name{
				width: 220px;height: 35px;
				margin: 10px 0 0 20px;
			}
			#password{
				width: 220px;height: 35px;
				margin: 15px 0 0 20px;
			}
			#button{
				width: 225px;height: 35px;
				margin: 20px 0 0 20px;
				font-family: "微软雅黑";
				font-size: 15px;
				color: #FFFFFF;
				background: #f13a3a;
				border: 0;
			}
			.denglu_font1{
				font-family: "微软雅黑";
				font-size: 15px;
				margin: 5px 0 0 180px;
			}
			.denglu_font1 a{
				text-decoration: none;
				color: #CCCCCC;
			}
			
			.people_bottom{
				width: 1848px;height: 600px;
				background: #222324;
			}
			.people_bottom .bottom_photo{
				position: relative;
				top: 10px;
				margin: 0 auto;
				width: 1840px;height: 300px;
				border: 0px solid cyan;
			}
			.bottom_photo_1{
				margin-top: 90px;
				margin-left: 275px;
				width: 160px;height: 120px;
				border: 0px solid pink;
				text-align: center;     	/*图片的居中*/
			}
			.bottom_photo_1 p{
				color: #93989d;
				margin-top: 4px;
			}
			.bottom_photo_2{
				margin-top: 90px;
				margin-left: 145px;
				width: 160px;height: 120px;
				border: 0px solid pink;
				text-align: center;     	/*图片的居中*/
			}
			.bottom_photo_2  p{
				color: #93989d;
				margin-top: 6px;
			}
			.erweima img{
				margin: 70px 0 0 120px;
			}
			.bottom_photo_3{
				margin-top: 90px;
				margin-left: 120px;
				width: 160px;height: 120px;
				border: 0px solid pink;
				text-align: center;     	/*图片的居中*/
			}
			.bottom_photo_3  p{
				color: #93989d;
				margin-top: 6px;
			}
			.bottom_photo_4{
				margin-top: 90px;
				margin-left: 130px;
				width: 160px;height: 120px;
				border: 0px solid pink;
				text-align: center;     	/*图片的居中*/
			}
			.bottom_photo_4  p{
				color: #93989d;
				margin-top: 6px;
			}
			.copyright{
				margin-top: 80px;
				color: #93989d;
				text-align: center;
			}
			
			#after:after{
				content: "";
				background: red;
				width:100px;
				height: 2px;
				position: absolute;
				left: 311px;
				top: 186px;
			}
			
			.twoweima1{
				display: none;
			}
			#twoweima:hover .twoweima1{
				display: block;
			}
			#tupiang{
			-webkit-transform: scale(0.8);
			}
			#tupiang:hover{
			-webkit-transform: scale(1.001);
		 	-webkit-transform: all;
			-webkit-transition-duration: 1s;
			-webkit-transition-timing-function: linear;				
			}
			#a1{
				color: #000000;
			}
			
			#a1:hover{
				color: red;
			}
			
			.bottom_nav{
				overflow: hidden;
				text-align: center;
				
			}
			.bottom_nav li {
				font-family: "微软雅黑";
				font-size: 18px;
				float: left;
				padding-left: 50px;
				padding-right: 50px;
				width: 100px;
				color: #666;
				list-style: none; 	/*去点*/
				line-height: 80px;
				border-right: 1px solid #CCCCCC;
				cursor: pointer;
			}
			
			.table1{
				font-family: "微软雅黑";
				font-size: 18px;
				width: 147px;height: 50px;
				background-color: #f7f7f7;	
			}
			.table2{
				font-family: "微软雅黑";
				font-size: 18px;
				width: 493px;height: 50px;	
			}
			.table3{
				font-family: "微软雅黑";
				font-size: 18px;
				width: 147px;height: 50px;
				background-color: #f7f7f7;	
			}
			.table4{
				font-family: "微软雅黑";
				font-size: 18px;
				width: 493px;height: 50px;	
			}
			
			.content{
				width: 100%;
				height: 72px;
			}
			.stars{
				width: 50%;
				list-style: none;
				margin: 0;
				line-height: 70px;
				color: #ccc;
				margin-left: 130px;				
			}
			.stars span{
				font-size: 30px;
				margin-left: 10px;
			}
			.stars span:after{
				content: '☆';
			}
			.stars .show:after,.stars .show2:after{
				content: '★';
			}
			.info{
				position: absolute;
				top: -1px;left: 340px;
				width: 60px;
				height: 30px;
				background: #e15671;
				border-radius: 5px;
				color: #fff;
				margin-top: 21px;
				text-align: center;
				line-height: 30px;
				display: none;
			}
			.show{
				color: #e4c6e4;
				}
			.show2{
				color: #e15671; 
				}
		</style>
		<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
		<script>
			$(document).ready(function(){
				$(".border_1").mouseenter(function(){		
					$('.up_border_1').animate({
 						left: '-120px',
  						opacity: 1,
 						}, 900, function() {
	  			// Animation complete.
								});
				});
				$(".border_1").mouseleave(function(){		
					$('.up_border_1').animate({
   						left: '-170px',
						opacity: 0,
   						}, 0, function() {
	  			// Animation complete.
								});
				});
				
				$(".border_2").mouseenter(function(){		
					$('.up_border_2').animate({
 						left: '-120px',
  						opacity: 1,
 						}, 900, function() {
	  			// Animation complete.
								});
				});
				$(".border_2").mouseleave(function(){		
					$('.up_border_2').animate({
   						left: '-170px',
						opacity: 0,
   						}, 0, function() {
	  			// Animation complete.
								});
				});
				
					$(".border_4").mouseenter(function(){		
					$('.up_border_4').animate({
 						left: '-120px',
  						opacity: 1,
 						}, 900, function() {
	  			// Animation complete.
								});
				});
				$(".border_4").mouseleave(function(){		
					$('.up_border_4').animate({
   						left: '-170px',
						opacity: 0,
   						}, 0, function() {
	  			// Animation complete.
								});
				});
				
				$(".border_5").mouseenter(function(){		
					$('.up_border_5').animate({
 						left: '-180px',
  						opacity: 1,
 						}, 900, function() {
	  			// Animation complete.
								});
				});
				$(".border_5").mouseleave(function(){		
					$('.up_border_5').animate({
   						left: '-230px',
						opacity: 0,
   						}, 0, function() {
	  			// Animation complete.
						});
				});
				
					$(".border_6").mouseenter(function(){		
					$('.up_border_6').animate({
 						left: '-120px',
  						opacity: 1,
 						}, 900, function() {
	  			// Animation complete.
								});
				});
				$(".border_6").mouseleave(function(){		
					$('.up_border_6').animate({
   						left: '-170px',
						opacity: 0,
   						}, 0, function() {
	  			// Animation complete.
								});
				});
				
				$(".border_1").click(function(){
					$(".denglu_2").css("display","none");
					$(".denglu_3").css("display","none");
					$(".denglu_1").toggle('slow',function(){						
					});					
				});
				
				$(".border_2").click(function(){
					$(".denglu_1").css("display","none");
					$(".denglu_3").css("display","none");
					$(".denglu_2").toggle('slow',function(){
					});
				});
				
				$(".border_3").click(function(){
					$(".denglu_1").css("display","none");
					$(".denglu_2").css("display","none");
					$(".denglu_3").toggle('slow',function(){
					});
				});
//				$(".border_1").click(function(){		
//					$('.denglu').animate({
//						opacity: 1,
// 						}, 1000, function() {
//	  			// Animation complete.
//								});
//				});
				
				$(".border_6").click(function(){
					$("html,body").stop().animate({
						'scrollTop':0
					});
				});	
				
				$("#btn1").click(function(){
					$("#btn1").css({'border':'3px solid pink'});
					$("#btn2").css({'border':'1px solid #cccccc'});
					$("#btn3").css({'border':'1px solid #cccccc'});
					$("#money").text("65.00");
				});
				$("#btn2").click(function(){
					$("#btn1").css({'border':'1px solid #cccccc'});
					$("#btn2").css({'border':'3px solid pink'});
					$("#btn3").css({'border':'1px solid #cccccc'});
					$("#money").text("95.00");
				});
				$("#btn3").click(function(){
					$("#btn1").css({'border':'1px solid #cccccc'});
					$("#btn2").css({'border':'1px solid #cccccc'});
					$("#btn3").css({'border':'3px solid pink'});
					$("#money").text("125.00");
				});
				
				$("#plus-sign").click(function(){
					var plus=$("#txt").val();
					plus++;
					//alert(plus);
					if(plus<100 && plus>0){
					$("#txt").val("   "+plus);	
					}else{
						alert("大气");
					}
				});
				$("#minus-sign").click(function(){
					var plus=$("#txt").val();
					plus--;
					//alert(plus);
					if(plus>0){
					$("#txt").val("   "+plus);	
					}else{
						alert("不想买就爬开");
					}
				});
				
				$("#table_two").hide();
				$("#table_three").hide();
				$("#btn_2").hide();
				$("#btn_3").hide();			 //默认展示table_one&&btn_1
				$("#btn_one").click(function(){
					$("#btn_1").show();
					$("#table_one").show();
					$("#btn_2").hide();
					$("#btn_3").hide();
					$("#table_two").hide();
					$("#table_three").hide();
				});
					$("#btn_two").click(function(){
						$("#btn_2").show();
						$("#table_two").show();
						$("#btn_1").hide();
						$("#btn_3").hide();
						$("#table_one").hide();
						$("#table_three").hide();
					});
						$("#btn_three").click(function(){
							$("#btn_3").show();
							$("#table_three").show();
							$("#btn_1").hide();
							$("#btn_2").hide();
							$("#table_one").hide();
							$("#table_two").hide();
						});
				
			});
			
			$(function(){
		countDown("10000","#hms");
	});
	function countDown(sys_second,id){ 
		var hour, minute, second,
			watch = $(id),
		    timer = setInterval(function(){ 
			if (sys_second > 0) { 
				sys_second -= 1; 
				hour = Math.floor((sys_second / 3600) % 24); 
				minute = Math.floor((sys_second / 60) % 60); 
				second = Math.floor(sys_second % 60); 
				hour=hour<10?"0"+hour:hour;//计算小时 
				minute=minute<10?"0"+minute:minute;//计算分钟 
				second=second<10?"0"+second:second;//计算秒杀 
				watch.text(hour).append(" : ").append(minute).append(" : ").append(second);
			} else { 
				clearInterval(timer);
			} 
		}, 1000); 
	} 
		</script>
	</head>
	<body>
		<div class="people">
		<div class="R_right">
				<div class="border_1">
					<img src="img/caketb2.png" width="27px"height="30px"/>
					<div class="up_border_1"><p class="p_right_1"><a href="#">我的资料</a></p></div>
				</div>
				<div class="denglu_1">
					<p class="denglu_font">请登录</p>
					<div style="border: 1px solid red;margin:0 0 0 12px;width: 65px;display: inline-block"></div>
					<div style="border: 1px solid #CCCCCC;margin:0 0 0 -5px;width: 190px;display: inline-block"></div>
					<input type="text" name="用户名" id="name" placeholder="       请输入用户名" style="background-image:url(img/inputname.jpg) ;"/>
					<input type="password" name="密码" id="password"  placeholder="请输入密码"/>
					<input type="button" id="button" value="登录"/>
					<p class="denglu_font1"><a href="#">免费注册></a></p>
				</div>
				
				<div class="border_2">
					<img src="img/caketb3.png" width="27px"height="25px"/>
					<div class="up_border_2"><p class="p_right_2"><a href="#">我的收藏</a></p></div>
				</div>
				<div class="denglu_2">
					<p class="denglu_font">请登录</p>
					<div style="border: 1px solid red;margin:0 0 0 12px;width: 65px;display: inline-block"></div>
					<div style="border: 1px solid #CCCCCC;margin:0 0 0 -5px;width: 190px;display: inline-block"></div>
					<input type="text" name="用户名" id="name" placeholder="请输入用户名" />
					<input type="password" name="密码" id="password"  placeholder="请输入密码"/>
					<input type="button" id="button" value="登录"/>
					<p class="denglu_font1"><a href="#">免费注册></a></p>
				</div>
				
				<hr style="border: 1px solid #181819; margin: 10px 0 0 7px; width: 45px;"/>
				<hr style="border: 1px solid #2d2e2f;margin-left: 7px; width: 45px;" />
				<div class="border_3">
					<img src="img/caketb4.png" width="27px"height="25px"/>
					<p style="text-align: center; margin-top: 10px; color: #FFFFFF;font-family: '微软雅黑';">购</p>
					<p style="text-align: center; margin-top: 10px; color: #FFFFFF;font-family: '微软雅黑';">物</p>
					<p style="text-align: center; margin-top: 10px; color: #FFFFFF;font-family: '微软雅黑';">车</p>
					<div class="R_right_button">0</div>			
				<hr style="border: 1px solid #2d2e2f;margin: 8px 0 0 7px; width: 45px;" />
				<hr style="border: 1px solid #181819; margin-left: 7px; width: 45px;"/>
				</div>
				
				<div class="denglu_3">
					<p class="denglu_font">请登录</p>
					<div style="border: 1px solid red;margin:0 0 0 12px;width: 65px;display: inline-block"></div>
					<div style="border: 1px solid #CCCCCC;margin:0 0 0 -5px;width: 190px;display: inline-block"></div>
					<input type="text" name="用户名" id="name" placeholder="请输入用户名" />
					<input type="password" name="密码" id="password"  placeholder="请输入密码"/>
					<input type="button" id="button" value="登录"/>
					<p class="denglu_font1"><a href="#">免费注册></a></p>
				</div>
				<div class="border_4">
					<img src="img/caketb1.png" width="30px"height="26px"/>
					<div class="up_border_4"><p class="p_right_4"><a href="talkabout.html">留言</a></p></div>
				</div>
				<div class="border_5">
					<img src="img/caketb5.png" width="30px"height="30px"/>
					<div class="up_border_5"><img src="img/twois.jpg" width="120px"height="120px" style="margin:20px 0 0 31px;"><p class="p_right_5"><a href="#"></a>手机二维码</p></div>
				</div>
				<div class="border_6">
					<img src="img/caketb6.png" width="30px"height="27px"/>
					<div class="up_border_6"><p class="p_right_6"><a>返回顶部</a></p></div>
				</div>
			</div>
		<div class="nav">    			<!-- 导航栏-->
				<a href="eater.html"><img src="img/sweeet.jpg" ></a>
				<a href="eater.html"><span class="font_left">蛋糕</span></a>
				<a href="eater.html"><span class="font_right">甜品</span></a>
				<ul class="nav_title">
					<li id="a" style="margin-left: 505px;"><a href="eater.html">首页</a></li>
					<li id="b"><a href="#">新品上市</a></li>
					<li id="c"><a href="hot.html">热卖产品</a></li>
					<li id="d"><a href="me.html">关于我们</a></li>
					<li id="e"><a href="talkabout1.html">联系我们</a></li>
					<li>
					<button id="shoppingcar" class="dropbtn" style="margin-top: -14px;">
						<img id="shoppingcar_left" src="img/shopping11.jpg">
						<span style="font-family: 楷体;font-weight: 600;">我的购物车 </span>
						<img id="shoppingcar_right" src="img/down.jpg" />
					</button>
					<div class="dropdown-content">						
        					<a href="#">
        						<img  src="img/w.jpg" style="position: relative; width: 80px;height: 80px; left: 20px;top: 50px;"/>
        						<span style="font-family: '微软雅黑'; opacity: 0.5; position: absolute; left: 110px;top: 70px;">您的购物车里暂时没有<b>sweet!</b></span>
        					</a>
    					</div>
					</li>
				</ul>
			</div>
			
<!--产品详情--><div style="width: 1848px;height: 60px;border: 0px solid pink;margin-top: 40px;">
				<p id="after" style="font-family: '微软雅黑';font-size: 20px;color: red;margin-left: 320px;">产品详情</p>
				<hr width="1300px" style="margin-left: 310px;"/>
	
</div>


<!--中部大容器--><div class="middle">
				<div style="width: 600px;height: 500px;border: 1px solid #CCCCCC; position: relative;left: 330px;"> <!--图片（left）-->
					<img id="tupiang" src="img/5.jpg" width="500px" height="500px" style="position: relative; left: 50px;"/>
				</div>
				
				<div style="width: 600px;height: 500px;border: 0px solid black;position: absolute;top: 221px;left: 970px;"> <!--（right）-->
					<div style="width: 550px;height: 50px;border: 0px solid pink;margin: auto;">		<!--1-->
						<p style="font-family: '微软雅黑';font-size: 20px;text-align: center;margin-top: 10px;">水果鲜奶生日蛋糕环游世界创意蛋同城配送速递</p>
						<div id="twoweima">
						<img src="img/8.gif" style="position: absolute;top: 15px;left: 515px;"/>
						<div class="twoweima1" style="position: relative;width: 200px;height: 200px;border: 0px solid green; top: -30px;left: 510px;">
							<img src="img/twois.jpg" />
							<button style="border: 0px;width: 130px;height: 24px;background: purple;color: #FFFFFF;margin-left: 27px;">扫描二维码</button>
						</div>
						</div>
				    </div>
					<div style="width: 550px;height: 35px;border: 0px solid blue;margin: auto;"> <!--2-->
						<img src="img/buy1.jpg" style="position: relative;top: 6px;left: 65px;"/>
						<span style="font-family: '微软雅黑';margin-left: 80px;">距离活动结束仅剩：一天</span>						
						<span id="hms">00 : 00 : 00</span>
						</span>
					</div>
					<div style="width: 550px;height: 55px;border: 0px solid cyan;margin: auto;"> <!--3-->
						<p style="display: inline-block; font-family: '微软雅黑';margin: 15px 0 0 70px;">价格(单)：</p><span style="font-family: '微软雅黑';font-size: 35px;position: relative;top: 6px;color: red;">￥</span>
						<span id="money" style="font-family: '微软雅黑';font-size: 35px;font-weight: 700;color: red;position: relative;top: 6px;">65.00~125.00 </span>
					</div>
					<div style="width: 550px;height: 30px;border: 0px solid cyan;margin: auto;"><!--4-->
						<span style="font-family: '微软雅黑';position: relative;top: -6px;left: 70px;">促销：</span>
						<span><img src="img/buy2.jpg" style="margin-top: 5px;margin-left: 70px;"/></span><span style="position: relative;top: -5px;font-family: '微软雅黑';">100减10块</span>
						<span><img src="img/buy2.jpg" style="margin-top: 5px;margin-left: 10px;"/></span><span style="position: relative;top: -5px;font-family: '微软雅黑';">200减20块</span>
						<span><img src="img/buy2.jpg" style="margin-top: 5px;margin-left: 10px;"/></span><span style="position: relative;top: -5px;font-family: '微软雅黑';">300减30块</span>
					</div>
					<div style="width: 550px;height: 55px;border: px solid cyan;margin: auto;"> <!--5-->
						<hr  />
						<table style="margin-top: 12px;margin-left: 100px;">
							<tr>
								<td style="font-family: '微软雅黑';margin-left: 10px;">销量：4600&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
								<td style="font-family: '微软雅黑';margin-left: 10px;">评论：0条 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
								<td style="font-family: '微软雅黑';margin-left: 10px;">收藏：0</td>
							</tr>
						</table>
						<hr style="margin-top: 14px;" />
					</div>
					<div style="width: 550px;height: 60px;border: 0px solid yellowgreen;margin: auto;"><!--6-->
						<span style="font-family: '微软雅黑';position: relative;top: 10px;left: 70px;">规格：</span>
						<button id="btn1"  style="position: relative;top: 10px;left: 70px;width: 100px;height: 30px; background: #FFFFFF;border:1px solid #CCCCCC; border-radius: 20px;outline: none;">580g</button>
						<button id="btn2" style="position: relative;top: 10px;left: 70px;width: 100px;height: 30px; background: #FFFFFF;border:1px solid #CCCCCC;border-radius: 20px;outline: none;">900g</button>
						<button id="btn3" style="position: relative;top: 10px;left: 70px;width: 100px;height: 30px; background: #FFFFFF;border:1px solid #CCCCCC;border-radius: 20px;outline: none;">1500g</button>
					</div>
					<div style="width: 550px;height: 60px;border: 0px solid yellowgreen;margin: auto;"><!--7-->
						<span style="font-family: '微软雅黑';position: relative;top: 10px;left: 40px;">购买数量：</span>
						<input type="text" id="txt" value="   1" style="width: 40px;height: 40px;position: relative;top: 8px;left: 60px;"/>
						<div id="plus-sign" style="border: 1px solid #CCCCCC;width: 13px;height: 13px; position: relative;top: -34px;left: 200px;"><img src="img/buy4.png" style="position: absolute;top: 1px;left: 1px;"></div>
						<div id="minus-sign" style="border: 1px solid #CCCCCC;width: 13px;height: 13px; position: relative;top: -24px;left: 200px;"><img src="img/buy5.png" style="position: absolute;top: 1px;left: 1px;"></div>
						<p style="font-family: '微软雅黑';position: relative;top: -55px;left: 240px;">库存量：100</p>
					</div>
					<div style="width: 550px;height: 90px;border: 0px solid purple;margin: auto;"><!--8-->
						<button style="border: 0px;border-radius: 5px;width: 200px;height: 50px;position: relative;top: 20px;left: 50px;outline: none;background: #FFFFFF;border: 2px solid red;"><img src="img/buy6.png" width="30px" style="position: absolute;top: 10px;left: 15px;"/>
						<span><a href="#" style="text-decoration: none;font-family: '微软雅黑';font-size: 17px;color: red;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;加入购物车</a></span>
						</button>
						<button style="border: 0px;border-radius: 5px;width: 200px;height: 50px;position: relative;top: 20px;left: 80px;outline: none;background: red;">
							<span><a href="#" style="text-decoration: none; font-family: '微软雅黑';font-size: 17px;color: #FFFFFF;">立即购买</a></span>						
						</button>
					</div>
					<div style="width: 550px;height: 50px;border: 0px solid purple;margin: auto;"><!--9-->
						<span style="display: inline-block; margin-top: 15px;margin-left: 70px;">产品保证</span>
						<img src="img/buy3.jpg" style="position: relative;top: 7px;left: 10px;"/>
						<span style="margin-left: 10px ;">正品保证</span>
						<img src="img/buy3.jpg" style="position: relative;top: 7px;left: 10px;"/>
						<span style="margin-left: 10px;">快速发货</span>
					</div>
				</div>
				
</div>
<!--容器左下角-->		<div style="width: 1848px;height: 60px;border: 0px solid pink;margin-top: 10px;">
					<div style="display: inline-block; width: 100px;height: 20px;border: 0px solid pink;margin-left: 340px;">
						<img src="img/caketb3.png" style="position:relative;top: 2px;"/><span><a href="#" id="a1" style="font-family: '微软雅黑';font-size: 16px;text-decoration: none;">&nbsp;收藏</a></span>
					</div>
					<div style="display: inline-block; width: 100px;height: 25px;border: 0px solid pink;">
						<img src="img/buy8.png" width="22px"style="position: relative;top: 4px;left: -18px;"/>
						<span>
							<a href="#" id="a1" style="font-family: '微软雅黑';font-size: 16px;text-decoration: none;margin-left: -15px;">联系我们</a>
						</span>
					</div>
					<div style="display: inline-block; width: 100px;height: 20px;border: 0px solid pink;">
						<img src="img/buy9.png" /><span>
							<a href="#" id="a1" style="font-family: '微软雅黑';font-size: 16px;text-decoration: none;margin-left: 0px;">分享</a>
						</span>
					</div>
</div>

<!--页面切换-->		<div style="width:1300px;height: 80px;border: 1px solid pink;margin-left: 310px;position: relative;">
					<div id="btn_1" style="width: 197px;border: 2px solid pink;position: absolute;top: 0px;left: 0px;"></div>
					<div id="btn_2" style="width: 197px;border: 2px solid pink;position: absolute;top: 0px;left: 200px;"></div>
					<div id="btn_3" style="width: 197px;border: 2px solid pink;position: absolute;top: 0px;left: 402px;"></div>
					<ul class="bottom_nav">
						<li id="btn_one">产品详情</li>
						<li id="btn_two">产品评论(0)</li>
						<li id="btn_three">销售记录(0)</li>
					</ul>
</div>
				<div id="table_one" style="width:1280px;height: 1800px;border: 0px solid pink;margin-left: 320px;margin-top: 20px;"><!-- 产品详情-->
					<table style="border: 1px solid #efefef;" border="1" cellspacing="0" cellpadding="0">
						<tr>
							<td class="table1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品牌：</td>
							<td class="table2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Design</td>
							<td class="table3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;规格： </td>
							<td class="table4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;580g、900g、1500g</td>
						</tr>
						<tr>
							<td class="table1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;配送地区：</td>
							<td class="table2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;祖安</td>
							<td class="table3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;包装方式： </td>
							<td class="table4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;盒装</td>
						</tr>
						<tr>
							<td class="table1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;保质期：</td>
							<td class="table2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2天</td>
							<td class="table3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生产许可证： </td>
							<td class="table4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;QS000000000</td>
						</tr>
						<tr>
							<td class="table1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;厂名：</td>
							<td class="table2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;XXX有限公司</td>
							<td class="table3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;厂址： </td>
							<td class="table4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;XX省XX市XX路XX号</td>
						</tr>
						<tr>
							<td class="table1">&nbsp;&nbsp;&nbsp;厂家联系方式： </td>
							<td class="table2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;020-0000000</td>
							<td class="table3"></td>
							<td class="table4"></td>
						</tr>
					</table>
					<img src="img/997.jpg"/>
					<img src="img/999.jpg" />
				</div>
				<div id="table_two" style="width:1280px;height: 600px;border: 0px solid pink;margin-left: 320px;margin-top: 20px;"><!--产品评论-->
					<div style="width:1280px;height: 550px;border: 0px solid pink;background: #efefef;">
						<div style="width: 1280px;height: 50px;border: 0px solid pink;position: relative;">
							<p style="font-family: '微软雅黑';font-size: 20px;position: absolute;top: 20px;left: 40px;">产品评价：</p>
							<div class="content">
								<div class="stars">
									<span></span>
									<span></span>
									<span></span>
									<span></span>
									<span></span>
								</div>
								<div class="info">优秀</div>
							</div>
							
						</div>
						<div style="width: 1280px;height: 100px;border: 0px solid pink;position: relative;">
							<p style="font-family: '微软雅黑';font-size: 20px;position: absolute;top: 30px;left: 80px;">昵称：</p>
							<input type="text" style="width: 170px;height: 50px;margin: 20px 0 0 140px;"/>
						</div>
						<div style="width: 1280px;height: 200px;border: 0px solid pink;position: relative;">
							<p style="font-family: '微软雅黑';font-size: 20px;position: absolute;top: 75px;left: 40px;">评论內容：</p>
							<input type="text" style="width: 1000px;height: 150px;margin: 20px 0 0 140px;"/>
						</div>
						<!--<div style="width: 1280px;height: 100px;border: 1px solid pink;position: relative;"></div>验证码-->
						<div style="width: 1280px;height: 100px;border: 0px solid pink;position: relative;">
							<p style="font-family: '微软雅黑';font-size: 20px;position: absolute;top: 30px;left: 40px;">上传文件：</p>
							<input type="file" style="width: 170px;height: 50px;margin: 34px 0 0 140px;"/>
						</div>
						<div style="width: 1280px;height: 100px;border: 0px solid pink;position: relative;">
							<button style="width: 180px;height: 50px;position: absolute;top: 10px;left: 545px;font-family: '微软雅黑';font-size: 20px;color: #FFFFFF;background: red;border: 0px;border-radius: 5px;outline: none;cursor: pointer;">提交评论</button>
						</div>
					</div>
				</div>
				<div id="table_three" style="width:1280px;height: 150px;border: 0px solid pink;margin-left: 320px;margin-top: 20px;"><!--销售记录-->
						<div style="width:1280px;height: 100px;border: 0px solid pink;background: #efefef;">
							<div style="width: 1280px;height: 100px;border: 0px solid pink;position: relative;">
								<p style="font-family: '微软雅黑';font-size: 20px;position: absolute;top: 35px;left: 80px;">买家</p>
								<p style="font-family: '微软雅黑';font-size: 20px;position: absolute;top: 35px;left: 440px;">选项​​信息</p>
								<p style="font-family: '微软雅黑';font-size: 20px;position: absolute;top: 35px;left: 800px;">数量</p>
								<p style="font-family: '微软雅黑';font-size: 20px;position: absolute;top: 35px;left: 1000px;">成交时间</p>
							</div>
						</div>
				</div>
			<div class="people_bottom">
					<div class="bottom_photo">
						<table>
							<tr>
								<td>
									<div class="bottom_photo_1">
										<img src="img/bottom1.jpg" />
										<p>全心全意为您服务</p>
									</div>
								</td>
								<td>
									<div class="bottom_photo_2">
										<img src="img/bottom2.jpg" />
										<p style="color: #93989d;">原材料正宗，价格低</p>
									</div>
								</td>
								<td>
									<div class="erweima">
										<img src="img/twois.jpg" />
									</div>
								</td>
								<td>
									<div class="bottom_photo_3">
										<img src="img/bottom3.jpg" />
										<p style="color: #93989d;">公司化运作，放心购买</p>
									</div>
								</td>
								<td>
									<div class="bottom_photo_4">
										<img src="img/bottom4.jpg" />
										<p style="color: #93989d;">工作时间 9:00-22:00</p>
									</div>
								</td>
							</tr>
						</table>					
					</div>
					<hr style="border: 1px solid #181819; margin-top: 95px;" />
					<hr style="border: 1px solid #2d2e2f;" />
					<p class="copyright">©2019 网站—食品饮料 版权所有 |用手机扫描二维码可以进入本站获得扣取素材| 管理登录| 使用纯手工制作巨累</p>
			</div>			
			</div>
			<script type="text/javascript">
   			 var stars=document.querySelectorAll('.stars span');
   			 var info=document.querySelector('.info');
   			 var grades = ["极差","差","一般","良好","优秀"];
   			 var active=-1;   //记录当前点击的是哪颗星星
    			for(var i=0;i<stars.length;i++){
     				 stars[i].index=i;
     				 stars[i].onmouseover=function(){setStar(this.index);};
      				stars[i].onmouseout=function(){setStar(active);};
     				 stars[i].onclick=setClick;
   				 }
    				function setStar(nub){
    				  var name='';
    				  name= nub<2?'show':'show2';
     			 for(var i=0;i<stars.length;i++){
        			stars[i].className= i<=nub?name:'';
     			 }
     				 info.style.display= nub<0? 'none':'block';
     				 info.innerHTML=grades[nub];
    				} 
   				 function setClick(){
     				 active=this.index;
    				}
  		</script>
			
	</body>
</html>
